<template>
  <view class="flex-1 overflow-x-hidden">
		<view
		  class="px-5 flex flex-col flex-1"
		  v-if="settingInfo.switchCustom == 1"
		>
			<customNav title="我要定制"></customNav>
			<view
				class="w-full relative -z-10"
				:style="{
					paddingTop: navHeight * 2 - systemInfo.statusBarHeight * 2 + 22 + 'rpx',
					marginTop: systemInfo.statusBarHeight * 2 + 'rpx',
				}"
			>
				<view class="pl-[38rpx]">
					<view class="text-black text-[48rpx]">定制详情</view>
					<view class="text-[#7B7B7B] text-xs leading-5 mt-2">
						<view>Customization Details</view>
					</view>
				</view>
				<image
					class="w-[584rpx] h-[584rpx] absolute -right-[140rpx] -top-[64rpx] -z-10"
					src="https://ykx-1254116920.cos.ap-nanjing.myqcloud.com/aircraft/fly/fly-5.png"
				></image>
			</view>
			<view class="px-5 mt-[104rpx] pb-24">
				<view class="bg-white rounded-xl p-5">
					<view class="flex justify-between items-center pb-[30rpx] bbb">
						<view class="text-[26rpx] text-[#4C4C4C]"> 行程类型 </view>
						<view class="flex items-center">
							<!-- 选择后字体颜色样式 #1A1C1E -->
							<view class="text-[26rpx] text-[#1A1C1E]">{{
								info.travel_type
							}}</view>
						</view>
					</view>
					<!-- 不同日程 -->
					<view class="py-5 bbb">
						<view class="text-[26rpx] text-[#4C4C4C] pb-1">你的行程</view>
						<view
							class="flex items-center justify-between mt-3"
							v-for="(v, index) in info.travels"
							:key="index"
						>
							<view class="text-[#1A1C1E] text-base font-semibold">{{
								v.start_date.replace(/-/g, "/")
							}}</view>
							<view class="flex items-center">
								<view class="text-[#1A1C1E] text-base font-extrabold">{{
									v.start_area
								}}</view>
								<image
									src="@/static/arrowx.png"
									class="w-[36rpx] mx-[20rpx]"
									mode="widthFix"
								></image>
								<view class="text-[#1A1C1E] text-base font-extrabold">{{
									v.end_area
								}}</view>
							</view>
						</view>
					</view>
					<view class="flex justify-between items-center pb-[30rpx] pt-5">
						<view class="text-[26rpx] text-[#4C4C4C]"> 出行人数 </view>
						<view class="flex items-center">
							<view class="text-[26rpx] text-[#1A1C1E]"
								>{{ info.person_total }}人</view
							>
						</view>
					</view>
					<view class="flex justify-between items-center pb-[30rpx]">
						<view class="text-[26rpx] text-[#4C4C4C]"> 价格预算 </view>
						<view class="flex items-center">
							<view class="text-[26rpx] text-[#1A1C1E]">{{
								info.price_budget
							}}</view>
						</view>
					</view>
					<view class="flex justify-between items-center pb-[30rpx]">
						<view class="text-[26rpx] text-[#4C4C4C]"> 弹性日期 </view>
						<view class="flex items-center">
							<view class="text-[26rpx] text-[#1A1C1E]">{{
								info.flex_date
							}}</view>
						</view>
					</view>
					<view class="flex justify-between items-center pb-[30rpx]">
						<view class="text-[26rpx] text-[#4C4C4C]"> 机型偏好 </view>
						<view class="flex items-center">
							<view class="text-[26rpx] text-[#1A1C1E]">{{
								info.plane_like
							}}</view>
						</view>
					</view>
					<view class="flex justify-between items-center pb-[30rpx]">
						<view class="text-[26rpx] text-[#4C4C4C]"> 联系人 </view>
						<view class="flex items-center">
							<view class="text-[26rpx] text-[#1A1C1E]">{{
								info.contactor
							}}</view>
						</view>
					</view>
					<view class="flex justify-between items-center">
						<view class="text-[26rpx] text-[#4C4C4C]"> 联系电话 </view>
						<view class="flex items-center">
							<view class="text-[26rpx] text-[#1A1C1E]">{{ info.phone }}</view>
						</view>
					</view>
				</view>

				<view class="bg-white rounded-xl p-[30rpx] mt-3">
					<view class="text-black text-xl font-medium mb-[22rpx]">定制方案</view>
					<view class="rounded-lg w-full min-h-[400rpx]">
						{{ info.handle_note }}
					</view>
				</view>
			</view>
			<view
				class="w-full fixed bottom-0 bg-white px-5 pt-[30rpx] pb-5 flex justify-between items-center"
			>
				<view
					@click="makePhone"
					class="bg-[#F2F5FF] flex items-center justify-center text-black text-lg font-medium w-[320rpx] h-[90rpx] leading-[90rpx] text-center"
				>
					<image src="@/static/phone.png" class="w-6 h-6"></image>
					<text class="pl-[14rpx]">联系电话</text>
				</view>
				<view
					@click="show = true"
					class="bg-theme rounded w-[320rpx] font-medium text-lg text-white h-[90rpx] leading-[90rpx] text-center"
				>
					添加定制师微信
				</view>
			</view>
			<up-overlay :show="show">
				<view
					class="flex flex-col items-center h-full justify-center pb-10"
					@click.stop
				>
					<view
						class="w-[530rpx] h-[618rpx] bg-white rounded-[20rpx] pt-[56rpx] px-5 pb-6 flex flex-col items-center"
					>
						<view
							class="text-xs text-[#4C4C4] leading-5 text-center px-1 mt-[30rpx]"
						>
							<view> 通过下方微信二维码添加定制师</view>
						</view>
						<image
							show-menu-by-longpress
							:src="settingInfo.customPic"
							class="w-[360rpx] h-[360rpx]"
							mode="widthFix"
						></image>
						<view class="text-[#858585] text-base leading-4 mt-2"
							>长按识别二维码</view
						>
					</view>
					<image
						@click="show = false"
						src="@/static/close.png"
						class="w-8 h-8 mt-5"
					></image>
				</view>
			</up-overlay>
			</view>
			<view v-else class="w-full flex-1 h-full flex flex-col bg-white">
			  <image
			    class="w-full"
			    mode="widthFix"
			    src="https://ykx-1254116920.cos.ap-nanjing.myqcloud.com/aircraft/222.jpg"
			  ></image>
			</view>
  </view>
</template>

<script setup lang="ts">
import { getCustomDetail_api } from "@/api/index";
import { ref, reactive, computed } from "vue";
import { onLoad, onPageScroll } from "@dcloudio/uni-app";
import { useUserStore } from "@/stores/user.js";
const userStore = useUserStore();
const settingInfo = computed(() => userStore.setting);
onPageScroll((e) => {});
const customStyle = computed(() => ({
  height: "84rpx",
}));
const show = ref(false);

const info = ref({});

const makePhone = () => {
  uni.makePhoneCall({
    phoneNumber: settingInfo.value.customPhone,
  });
};

const getDtail = (id) => {
  getCustomDetail_api(id).then((res) => {
    info.value = res;
  });
};

onLoad(({ id }) => {
  getDtail(id);
});
const systemInfo = uni.getSystemInfoSync();
// 获取胶囊按钮位置信息
const menuButtonInfo = uni.getMenuButtonBoundingClientRect();

// 计算导航栏高度（状态栏高度 + 胶囊按钮高度 + 上下边距）
const navHeight =
  menuButtonInfo.bottom + menuButtonInfo.top - systemInfo.statusBarHeight;
</script>

<style lang="scss" scoped>
.bbb {
  border-bottom: 2rpx solid #f7f7f7;
}
:deep(.u-border) {
  border-color: #eceff4 !important;
}
</style>
